import React, { useState } from 'react';
import { Modal, Image, Radio } from 'antd';
import styles from './index.less';

const CheckImgModal = (props: any) => {
  const { visible, onChange, onClose } = props;

  const handleOk = () => {
    onClose();
  };

  const handleCancel = () => {
    onClose();
  };

  const onChangeImg = (param: any) => {
    if (onChange) {
      onChange(param);
    }
  };

  const mock = [
    {
      type: 'banner',
      title: 'banner',
      imgArr: [
        {
          id: '1',
          img: 'https://www.iqihang.com/zt/22vip/images/banner01.png?v=8.4',
          title: 'vip 班',
        },
        {
          id: '2',
          img: 'https://www.iqihang.com/zt/qcb/images/banner.png?v=8.01',
          title: '暑假全程班',
        },
        {
          id: '3',
          img: 'https://www.iqihang.com/zt/22major/images/banner.jpg?v=2',
          title: '考研精品班',
        },
      ],
    },
  ];

  return (
    <Modal
      title="选择图片"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      width={1000}
    >
      <Image.PreviewGroup>
        <div className={styles.checkImgContent}>
          {mock[0].imgArr.map((item) => {
            return (
              <div
                key={item.id}
                className={styles.imgItem}
                onClick={() => onChangeImg(item)}
              >
                <Image width={200} height={90} src={item.img} />
                <div>{item.title}</div>
              </div>
            );
          })}
        </div>
      </Image.PreviewGroup>
    </Modal>
  );
};
export default CheckImgModal;
